<template>
    <view>
        <!-- components/Navigation/index.wxml -->
        <view class="height"></view>
        <view class="navigation-wrap" v-show="navId==5?false:true">
            <view class="navigation-empty-wrap">
                <view class="empty-box"></view>
                <view class="bottom-safet-area" :style="'height: ' + emptyHeight + 'rpx;'"></view>
            </view>
            <view class="fixed-nav-wrap">
                <view class="shadow-box">
                    <view
                        :class="
                            'middle-circle  ' +
                            (navId == 1 ? 'middle-circle1' : navId == 2 ? 'middle-circle2' : navId == 3 ? 'middle-circle3' : navId == 4 ? 'middle-circle4' : 'middle-circle5')
                        "
                    ></view>
                </view>
                <view class="fixed-nav-content" >
                    <view class="table" >
                        <view :class="'cell ' + (item.id === navId ? 'active' : '')" :data-id="item.id" @tap="jump2Event" v-for="(item, index) in navList" :key="index">
                            <block v-if="item.id === navId">
                                <view class="scan1">
                                    <image :src="item.img1" mode="aspectFill" class="scan1" />
                                </view>
                            </block>

                            <block v-else>
                                <view class="scan">
                                    <image :src="item.img" mode="aspectFill" />
                                </view>
                            </block>

                            <block>{{ item.name }}</block>
                        </view>
						
						
                    </view>
                </view>
                <view class="bottom-safet-area" :style="'height: ' + emptyHeight + 'rpx;'"></view>
            </view>
        </view>
    </view>
</template>

<script>
// components/Navigation/index.js
export default {
    data() {
        return {
			// testSrc:'/static/images/tar/tar1-1.png',
            navList: [
                {
                    id: 1,
                    name: '主页',
                    path: '/pages/index/index',
                    img: '/static/images/tar/tar1-1.png',
                    img1: '/static/images/tar/tar1-2.png'
                },
                // {
                //     id: 2,
                //     name: '数据报表',
                //     path: '/pages/report/index',
                //     img: '/static/images/tar/tar2-1.png',
                //     img1: '/static/images/tar/tar2-2.png'
                // },
                // {
                //     id: 3,
                //     name: '收款核销',
                //     path: '/pages/payment/index',
                //     img: '/static/images/tar/tar3-1.png',
                //     img1: '/static/images/tar/tar3-2.png'
                // },
                // {
                //     id: 4,
                //     name: '商城外卖',
                //     path: '/pages/takeout/index',
                //     img: '/static/images/tar/tar4-1.png',
                //     img1: '/static/images/tar/tar4-2.png'
                // },
                {
                    id: 5,
                    name: '我的',
                    path: '/pages/mine/index',
                    img: '/static/images/tar/tar5-1.png',
                    img1: '/static/images/tar/tar5-2.png'
                }
            ],
            emptyHeight: 0
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        navId: {
            type: Number,
            default: 1
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    /**
     * 组件的方法列表
     */
    methods: {
        ready() {
            this.initialHeight();
        },

        // 获取底部安全距离
        initialHeight() {
            const sysInfo = uni.getSystemInfoSync();
            this.setData({
                emptyHeight: sysInfo.windowHeight - sysInfo.safeArea.bottom
            });
        },

        // 跳转
        jump2Event(e) {
            const data = e.currentTarget.dataset;
            const currentNav = this.navList.filter((item) => item.id == data.id)[0];
            if (currentNav['path']) {
                uni.reLaunch({
                    url: currentNav['path']
                });
            } else if (data.id == -1) {
                // 扫码
                uni.scanCode({
                    success: (res) => {
                        console.log('success', res);
                    },
                    fail: (msg) => {
                        console.error(msg);
                    }
                });
            }
            // if end
        }
    },
    created: function () {}
};
</script>
<style>
/* components/Navigation/index.wxss */
.height {
    height: 120rpx;
}
.navigation-wrap {
    width: 100%;
}

.fixed-nav-wrap {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 100;
}

.fixed-nav-wrap .shadow-box {
    width: 100%;
    min-height: 150rpx;
    background-color: #ffffff;
    box-shadow: 0 0 10rpx rgba(255, 110, 0, 0.82);
    position: relative;
    z-index: 1;
	border-radius: 100rpx;
}

.fixed-nav-wrap .shadow-box .middle-circle {
    /* width: 140rpx;
    height: 140rpx;
    border-radius: 100rpx;
    box-shadow: 0 0 10rpx rgba(255, 110, 0, 0.8);
    background-color: #ffffff;
    position: absolute;
    top: -45rpx;
    z-index: 1; */
}

.fixed-nav-wrap .shadow-box .middle-circle1 {
    left: 0%;
    margin-left: calc((20% - 140rpx) / 2);
}
.fixed-nav-wrap .shadow-box .middle-circle2 {
    left: 20%;
    margin-left: calc((20% - 140rpx) / 2);
}
.fixed-nav-wrap .shadow-box .middle-circle3 {
    left: 40%;
    margin-left: calc((20% - 140rpx) / 2);
}
.fixed-nav-wrap .shadow-box .middle-circle4 {
    left: 60%;
    margin-left: calc((20% - 140rpx) / 2);
}
.fixed-nav-wrap .shadow-box .middle-circle5 {
    left: 80%;
    margin-left: calc((20% - 140rpx) / 2);
}
.navigation-empty-wrap {
    width: 100%;
}
.navigation-empty-wrap .empty-box {
    width: 100%;
    height: 100rpx;
}
.bottom-safet-area {
    background-color: #fff;
}
.fixed-nav-content {
    background-color: #ffffff;
    width: 100%;
    height: 120rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
}

.fixed-nav-content .table {
    display: table;
    width: 100%;
    height: 150rpx;
    font-size: 26rpx;
}

.fixed-nav-content .table .cell {
    display: table-cell;
    vertical-align: middle;
    width: 20%;
    text-align: center;
    color: #505050;
}

.fixed-nav-content .table .cell.active {
    color: #ff872e;
}

.fixed-nav-content .scan {
   /* width: 80rpx;
    height: 80rpx; */
    position: relative;
    display: block;
    margin: 0 auto;
    top: 0rpx;
}

.fixed-nav-content .scan image {
    width: 60rpx;
    height: 60rpx;
    margin: 0 auto;
    display: block;
}

.fixed-nav-content .scan1 {
    /* width: 80rpx;
    height: 80rpx; */
    position: relative;
    display: block;
    margin: 0 auto;
    /* top: -10rpx; */
}

.fixed-nav-content .scan1 image {
    width: 60rpx;
    height: 60rpx;
    margin: 0 auto;
    display: block;
}
</style>
